<style lang="scss" scoped>
.header {
  width: 100%;
  height: 60px;
  background-image: url('https://kano.guahao.com/i8j817030135');
  display: flex;
  background-size: 100px 100%;
  .header-left {
    width: 30%;
  }

  .header-right {
    width: 70%;
  }
}
.search {
  background: #427dfd;
  border-radius: 15px;
  width: 60px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  position: absolute;
  color: white;
  right: 25px;
  top: 15px;
}
.therr {
  display: flex;
  .therr-item {
    text-align: center;
    margin-left: 20px;
    width: 32%;
    span {
      font-size: 12px;
      color: #ccc;
    }
    dt {
      text-align: center;
    }
  }
}

.happycity {
  margin-top: 10px;
}
.content {
  width: 100%;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  .content-item {
    width: 70px;
    height: 50px;
    text-align: center;
    img {
      width: 40px;
      height: 40px;
    }
    p {
      font-size: 12px;
    }
  }
}
.new-user {
  width: 80%;
  border: 2px solid sandybrown;
  margin-left: 10%;
  margin-top: 10px;
  background: #fffafa;
  height: 200px;
  border-radius: 30px;

  .new-user__content {
    width: 100%;
    display: flex;

    .new-user__content-item {
      width: 25%;
      height: 120px;
      margin-left: 20px;
      border: 1px solid red;
      border-radius: 10px;
      text-align: center;

      button {
        border: 0;
      }
    }
  }
}

.pifu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .pifu-item {
    margin: 10px 10px;
    width: 28%;
    border: 1px solid #ccc;
    background: #f4f6fa;
    border-radius: 10px;

    p {
      font-size: 12px;
      color: #ccc;
    }
  }
}
</style>
<template>
    <div class="content">
         <div v-for="(item, index) in list" :key="index" class="content-item" @click="tz(item.title)">
    <img v-lazy="item.image" alt="" />
    <p>{{ item.title }}</p>
  </div>
    </div>
 
</template>
<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import { MenuRoutes } from '@/router/index'
import { useRouter } from 'vue-router'
const router = useRouter()
const list: any = ref([])
const GetList = async () => {
  const res = await axios.get('/api/v1/menu')
  list.value = res.data.data
}
GetList()
const tz = (title: string) => {
  MenuRoutes.forEach((item: any) => {
    if (item.meta?.title == title) {
      router.push(item.path)
    }
  })
}
</script>